<!-- 首页的内容 -->
<template>
  <page-view class="menu">
    <page-header></page-header>
    <!-- 内容 -->
    <div
      class="content-box"
      ref="contentBoxDOM"
      @scroll="contetntBoxScroll($event)"
    >
      <div class="header-box">
        <!-- 轮播图 搜索框可以去跳转到页面-->
        <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <swipe-item v-for="(item, index) in bannerImg" :key="index">
            <van-image
              :src="item"
              width="100%"
              height="200px"
              fit="cover"
            ></van-image>
          </swipe-item>
        </swipe>
        <!-- 在轮播图上放一个输入框，点击可以跳转到搜索页面 -->
        <div class="query-box">
          <input
            type="text"
            class="query-text"
            readonly
            placeholder="请输入菜品名称"
          />
          <button
            class="query-btn"
            @click="$router.push({ name: 'SearchFood' })"
          >
            搜索
          </button>
        </div>
        <!-- 菜品列表区域 -->
        <div class="food-list" v-if="foodList.length > 0">
          <pull-refresh v-model="refreshing" @refresh="onRefresh">
            <list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              color="#0094ff"
            >
              <food-item
                v-for="(item, index) in foodList"
                :key="index"
                :f_item="item"
              ></food-item>
            </list>
          </pull-refresh>
        </div>
      </div>
    </div>
  </page-view>
</template>

<script>
import PageHeader from "@/components/PageHeader.vue";
import PageView from "@/components/PageView.vue";
//racative，ref动态获取页面数据,toRefs展开数据
import { reactive, ref, toRefs } from "@vue/reactivity";
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  List,
  PullRefresh,
  Loading,
} from "vant";

import Api from "../utils/api";
import { getCurrentInstance, onActivated, onMounted } from "@vue/runtime-core";
import FoodItem from "../components/FoodItem.vue";

export default {
  components: {
    PageHeader,
    PageView,
    Swipe,
    SwipeItem,
    VanImage,
    List,
    PullRefresh,
    Loading,
    FoodItem,
  },
  name: "Menu",
  setup() {
    const { proxy } = getCurrentInstance();

    //轮播图
    let bannerImg = reactive([
      require("../assets/imge/1.jpeg"),
      require("../assets/imge/2.jpeg"),
      require("../assets/imge/3.jpeg"),
      require("../assets/imge/4.jpeg"),
    ]);

    //获取vue的实例对象
    // const { proxy } =

    //丅滚懒加载菜单
    const onRefresh = () => {
      finished.value = false;
      refreshing.value = true;
      //清长度地址不改变
      //下拉刷新的时候将列表置空
      foodData.foodList.length = 0;
      getFood();
    };

    //下拉刷新菜单
    const onLoad = (pullRefresh) => {
      if (foodData.pageIndex < foodData.pageCount) {
        getFood(Number(foodData.pageIndex) + 1);
      }
    };

    //获取菜品列表
    // 是否显示加载状态
    const loading = ref(false);
    // 是否加载完成
    const finished = ref(false);
    //下拉刷新
    const refreshing = ref(false);

    // 食物数据
    const foodData = reactive({
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
      foodList: [],
    });

    //请求数据
    const getFood = async (pageIndex = 1) => {
      loading.value = true;
      let results = await Api.foodInfo.getListBypage({
        pageIndex: pageIndex,
      });

      foodData.pageCount = results.pageCount;
      foodData.pageEnd = results.pageEnd;
      foodData.pageIndex = results.pageIndex;
      foodData.pageStart = results.pageStart;
      foodData.totalCount = results.totalCount;

      //处理图片的网络地址
      results.listData.map(
        (item) => (item.food_img = proxy.BaseURL + item.food_img)
      );
      // 将第二次请求到的值push到foodList中做页面渲染
      foodData.foodList.push(...results.listData);
      //有请求就为false
      loading.value = false;
      //判断是否在最后一页
      finished.value = foodData.pageIndex >= foodData.pageCount;
      refreshing.value = false;
    };

    let contentBoxDOM = ref(null);
    //记录滚动的高度,让商品展示在原本页面
    let contentBoxScrollTop = 0;
    function contetntBoxScroll(event) {
      contentBoxScrollTop = event.currentTarget.scrollTop;
    }

    //这个不管是否会缓存都会执行
    onActivated(() => {
      contentBoxDOM.value.scrollTop = contentBoxScrollTop;
    });
    //在刚刚挂起的函数中调用
    onMounted(() => {
      getFood();
    });

    return {
      contentBoxDOM,
      contetntBoxScroll,
      bannerImg,
      onRefresh,
      onLoad,
      ...toRefs(foodData),
      loading,
      finished,
      refreshing,
    };
  },
};
</script>

<style lang="scss" scoped>
.menu {
  @include flexbox(column);
  .content-box {
    flex: 1;
    overflow: auto;
    margin-bottom: 60px;
    .header-box {
      position: relative;
      .query-box {
        position: absolute;
        top: 10px;
        left: 40px;
        right: 40px;
        display: flex;
        height: 30px;
        border-radius: 30px;
        overflow: hidden;
        .query-text {
          flex: 1;
          border: none;
          box-sizing: border-box;
          padding: 0 10px;
          outline: none;
          background-color: rgba($color: #c3b3b3, $alpha: 0.5);
          color: white;
        }
        .query-btn {
          width: 45px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: rgba($color: #c3b3b3, $alpha: 0.5);
          color: #fff;
        }
      }
    }
  }
}
</style>
